<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px" id="btn">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">角色名称</label>
                            <div class="layui-input-inline">
                                <!--注意此处input标签里的id-->
                                <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
                            </div>
                        </div>
                        
                        <div class="layui-inline">
                            <!--注意此处button标签里的type属性-->
                            <button type="button" class="layui-btn layui-btn-primary"  lay-submit data-type="reload" lay-filter="data-search-btn"><i class="layui-icon">?</i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>   
        <!--注意此处table标签里的id-->
        <table class="layui-table layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
     layui.use(['jquery', 'form', 'table', 'layer', 'tree'], function () {
        var	$ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            tree = layui.tree;
          
      var tableIns = table.render({
        	elem: '#test',		//对应table标签里的id
            url:'http://localhost:3050/api/test.json ',	//从后台获取数据的url
            id:'test',			//此处也需要设置这个属性，后边会用到
            toolbar: '#toolbarDemo',
            method:'post',
            dataType:'json',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            //用于对返回的数据格式的自定义，如：
            parseData:function(res) {
              return {
                  "code":res.status,
                  "msg":res.message,
                  "count":res.total,
                  "data":res.data.item
              };
            },
       		
            cols: [[
                //{type: "checkbox", width: 50},
                {field: 'id', width: 120, title: '序号',align: "center", sort: true},
                {field: 'Sno', width: 120, title: '学号',align: "center", sort: true},
                {field: 'Sname', width: 120, title: '姓名',align: "center"},
                {field: 'clas', width: 120, title: '班级',align: "center", sort: true},
                {field: 'Email', width: 120, title: 'Email',align: "center"},
                //{field: 'sign', title: '签名', minWidth: 150},
                {field: 'prove', width: 120, title: '是否验证',align: "center", sort: true},
                {field: 'phone', width: 120, title: '电话'},
                //{field: 'classify', width: 80, title: '职业'},
                //{field: 'wealth', width: 135, title: '财富', sort: true},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limit:6,		//默认6条数据一页
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局 
                ,limits:[6,10,15]
                ,first: false //不显示首页
                ,last: false //不显示尾页
              },
            skin: 'line'
        });
        var active = {
        	    reload: function(){
        	      var demoReload = $('#demoReload');	//得到搜索框里已输入的数据   	      
        	      //执行重载
        	      table.reload('test', {
        	        page: {
        	          curr: 1 //重新从第 1 页开始
        	        }
        	        ,where: {
        	          name:  demoReload.val()		//在表格中进行搜索
        	        }
        	      });
        	    }
        	  };
        	  
        	  $('#btn .layui-btn').on('click', function(){
        	    var type = $(this).data('type');
        	    active[type] ? active[type].call(this) : '';
        	  });
});
</script>

</body>
</html>